<template>
  <div class="welcome-box">
    <div class="title-content">
      <div class="title-box">
        <span>首页</span>
      </div>
      <span v-show="update">数据更新时间：{{ update }}</span>
    </div>
    <div class="content-all">
      <div class="content-left">
        <div class="left-head">
          <div class="w-card" :style="{'width':`calc(100% / ${statisticsList.length})`}" v-for="item in statisticsList"
            :key="item">
            <div>
              <span>{{ item.name }}</span>
              <span>{{ dataForm[item.id] }}</span>
            </div>
            <div>
              <img :src="item.imgUrl" alt="">
            </div>
          </div>
        </div>
        <div class="left-center w-card">
          <div class="title-box">
            <span>销售订单统计</span>
            <span style="margin-left:10px;font-size:14px;">总数</span>
            <span style="margin-left:5px;">{{ dataForm.orderSelf }}</span>
          </div>
          <div class="left-center-bot">
            <div>
              <el-table style="height:100%;" :header-cell-style="{background:'#ffffff',color:'#727780',fontSize:'14px'}"
                :cell-style="{fontSize:'14px',color:'#000000'}" :data="dataForm.orderSelfList" border>
                <el-table-column prop="submitType" label="订单类型" align="center">
                  <template v-slot="scope">
                    {{ scope.row.submitType == 1 ? 'H5' : scope.row.submitType == 2 ? '批量导入' : scope.row.submitType == 3 ? '第三方平台' : '' }}
                  </template>
                </el-table-column>
                <el-table-column prop="total" label="订单总数" align="center">
                  <template v-slot="scope">
                    {{ scope.row.total }}
                  </template>
                </el-table-column>
                <el-table-column prop="success" label="成功总数" align="center">
                  <template v-slot="scope">
                    {{ scope.row.success }}
                  </template>
                </el-table-column>
                <el-table-column prop="ing" label="进行中总数" align="center">
                  <template v-slot="scope">
                    {{ scope.row.ing }}
                  </template>
                </el-table-column>
                <el-table-column prop="toDeal" label="待处理总数" align="center">
                  <template v-slot="scope">
                    {{ scope.row.toDeal }}
                  </template>
                </el-table-column>
                <el-table-column prop="fail" label="失败总数" align="center">
                  <template v-slot="scope">
                    {{ scope.row.fail }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="height:calc(100% - 40px);">
              <pie-chart ref="pieChartRef" :yData="pieData" />
            </div>
          </div>
        </div>
        <div class="left-footer w-card">
          <div class="title-box">
            <span>其他订单统计</span>
          </div>
          <div class="w-f3">
            <div class="w-f-c">
              <span style="color:#727780;font-size:14px;">分销订单总数</span>
              <span style="font-size:24px;margin-top:10px;">{{ dataForm.orderPromotion }}</span>
              <div class="w-f2">
                <div class="w-f">
                  <span class="po1"></span>
                  <span style="margin-left:5px;">成功:</span>
                  <span>{{ dataForm.orderPromotionSuccess }}</span>
                </div>
                <div class="w-f">
                  <span class="po2"></span>
                  <span style="margin-left:5px;">进行中:</span>
                  <span>{{ dataForm.orderPromotionIng }}</span>
                </div>
                <div class="w-f">
                  <span class="po3"></span>
                  <span style="margin-left:5px;">待处理:</span>
                  <span>{{ dataForm.orderPromotionToDeal }}</span>
                </div>
                <div class="w-f">
                  <span class="po4"></span>
                  <span style="margin-left:5px;">失败:</span>
                  <span>{{ dataForm.orderPromotionFail }}</span>
                </div>
              </div>
            </div>
            <div class="w-f-c">
              <span style="color:#727780;font-size:14px;">自动生产总数</span>
              <span style="font-size:24px;margin-top:10px;">{{ dataForm.orderProduceAuto }}</span>
              <div class="w-f2">
                <div class="w-f">
                  <span class="po1"></span>
                  <span style="margin-left:5px;">成功:</span>
                  <span>{{ dataForm.orderProduceAutoSuccess }}</span>
                </div>
                <div class="w-f">
                  <span class="po2"></span>
                  <span style="margin-left:5px;">进行中:</span>
                  <span>{{ dataForm.orderProduceAutoIng }}</span>
                </div>
                <div class="w-f">
                  <span class="po3"></span>
                  <span style="margin-left:5px;">待处理:</span>
                  <span>{{ dataForm.orderProduceAutoToDeal }}</span>
                </div>
                <div class="w-f">
                  <span class="po4"></span>
                  <span style="margin-left:5px;">失败:</span>
                  <span>{{ dataForm.orderProduceAutoFail }}</span>
                </div>
              </div>
            </div>
            <div class="w-f-c">
              <span style="color:#727780;font-size:14px;">手动生产订单总数</span>
              <span style="font-size:24px;margin-top:10px;">{{ dataForm.orderProduceManu }}</span>
              <div class="w-f2">
                <div class="w-f">
                  <span class="po1"></span>
                  <span style="margin-left:5px;">成功:</span>
                  <span>{{ dataForm.orderProduceManuSuccess }}</span>
                </div>
                <div class="w-f">
                  <span class="po2"></span>
                  <span style="margin-left:5px;">进行中:</span>
                  <span>{{ dataForm.orderProduceManuIng }}</span>
                </div>
                <div class="w-f">
                  <span class="po3"></span>
                  <span style="margin-left:5px;">待处理:</span>
                  <span>{{ dataForm.orderProduceManuToDeal }}</span>
                </div>
                <div class="w-f">
                  <span class="po4"></span>
                  <span style="margin-left:5px;">失败:</span>
                  <span>{{ dataForm.orderProduceManuFail }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="w-card">
          <div class="title-box">
            <span>账户统计</span>
          </div>
          <div class="w-f-c2">
            <img src="@/assets/icons/wp6.png" alt="">
            <span>{{ numFormat(dataForm.charge/100) }}</span>
            <span>充值总金额(元)</span>
          </div>
          <div class="w-f-c3">
            <div>
              <span>{{ numFormat(dataForm.rest/100) }}</span>
              <span>余额(元)</span>
            </div>
            <div>
              <span>{{ numFormat(dataForm.orderUsed/100) }}</span>
              <span>订单消费金额(元)</span>
            </div>
            <div>
              <span>{{ numFormat(dataForm.interfaceUsed/100) }}</span>
              <span>接口消费金额(元)</span>
            </div>
          </div>
        </div>
        <div class="w-card">
          <div class="title-box">
            <span>功能介绍</span>
          </div>
          <div v-for="item in gnList" :key="item">
            <div>
              <img :src="item.imgUrl" alt="">
            </div>
            <div>
              <span>{{ item.title }}</span>
              <span>{{ item.msg }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { getDateTime, warningDeal, numFormat } from '@/utils/utils'
import pieChart from '@/components/pieChart.vue'
import api from './api'
export default {
  components: {
    pieChart,
  },
  setup() {
    const state = reactive({
      update: null,
      statisticsList: [
        {
          id: 'autoProduct',
          name: '自动生产产品总数',
          imgUrl: require('@/assets/icons/wp1.png'),
          num: '122',
        },
        {
          id: 'manuProduct',
          name: '手动生产产品总数',
          imgUrl: require('@/assets/icons/wp2.png'),
          num: '122',
        },
        {
          id: 'shopProduce',
          name: '生产方总数',
          imgUrl: require('@/assets/icons/wp3.png'),
          num: '122',
        },
        {
          id: 'shopPromotion',
          name: '分销商总数',
          imgUrl: require('@/assets/icons/wp4.png'),
          num: '122',
        },
        {
          id: 'user',
          name: '商户员工总数',
          imgUrl: require('@/assets/icons/wp5.png'),
          num: '122',
        },
      ],
      gnList: [
        {
          imgUrl: require('@/assets/icons/wp7.png'),
          title: '员工/角色管理',
          msg: '提供员工和角色的管理，方便企业管理平台',
        },
        {
          imgUrl: require('@/assets/icons/wp8.png'),
          title: '商户管理',
          msg: '方便查看平台商户信息，便于企业运营',
        },
        {
          imgUrl: require('@/assets/icons/wp9.png'),
          title: '生产接口管理',
          msg: '实现订单的自动提交和回传生产信息等',
        },
        {
          imgUrl: require('@/assets/icons/wp10.png'),
          title: '数据统计',
          msg: '提供详细的平台数据统计',
        },
        {
          imgUrl: require('@/assets/icons/wp11.png'),
          title: '线下代充',
          msg: '线下收款，线上通过平台向商户账户充值',
        },
      ],
      dataForm: {
        orderSelf: 200
      },
      pieData: [],
    })

    function setPieData(list) {
      const myArr = []
      list && list.map(item => {
        myArr.push({
          value: item.total,
          name: item.submitType == 1 ? 'H5' : item.submitType == 2 ? '批量导入' : item.submitType == 3 ? '第三方平台' : '',
        })
      })
      state.pieData = myArr
    }

    function getData() {
      api.staticsIndex().then(res => {
        if (res.code == '200') {
          state.update = getDateTime(new Date().getTime())[6]
          state.dataForm = res.data
          setPieData(res.data.orderSelfList)
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onMounted(() => {
      getData()
    })

    return {
      ...toRefs(state),
      numFormat,
    }
  }
}
</script>

<style lang="scss" scoped>
.welcome-box {
  width: 100%;
  height: 100%;
  .title-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > span {
      font-size: 14px;
      color: #9c9b9e;
    }
  }
  .content-all {
    width: 100%;
    height: calc(100% - 31px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    .content-left {
      width: 70%;
      height: 100%;
      min-width: 1000px;
      display: flex;
      flex-flow: column;
      .left-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        > div {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          justify-content: space-between;
          padding: 10px 10px;
          font-size: 14px;
          > div:first-of-type {
            display: flex;
            flex-flow: column;
            gap: 5px;
            > span {
              color: #727780;
            }
            > span:last-of-type {
              font-size: 24px;
              color: #000000;
            }
          }
          > div:last-of-type {
            img {
              width: 50px;
            }
          }
        }
      }
      .left-center {
        width: 100%;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 10px 20px;
        padding-right: 0;
        flex-grow: 1;
        .left-center-bot {
          margin-top: 10px;
          display: flex;
          height: calc(100% - 40px);
          > div:first-of-type {
            width: 65%;
            border-right: 1px solid #e8e9eb;
            display: flex;
            flex-flow: column;
            > span:first-of-type {
              font-size: 14px;
              color: #727780;
            }
            > span:last-of-type {
              font-size: 24px;
            }
          }
          > div:last-of-type {
            width: 35%;
            height: 100%;
          }
        }
      }
      .left-footer {
        width: 100%;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 10px 20px;
      }
    }
    .content-right {
      width: 30%;
      height: 100%;
      min-width: 480px;
      display: flex;
      flex-flow: column;
      gap: 20px;
      > div {
        box-sizing: border-box;
        padding: 20px;
      }
      > div:last-of-type {
        flex-grow: 1;
        overflow: hidden;
        overflow-y: auto;
        > div:not(:first-of-type) {
          margin-top: 20px;
          display: flex;
          align-items: center;
          gap: 10px;
          img {
            width: 80px;
          }
          > div:last-of-type {
            display: flex;
            flex-flow: column;
            gap: 10px;
            > span:first-of-type {
              font-weight: bold;
            }
            > span:last-of-type {
              font-size: 14px;
              color: #727780;
            }
          }
        }
      }
    }
  }
}
.title-box {
  display: flex;
  align-items: center;
  > span {
    font-size: 16px;
    font-weight: bold;
  }
}
.po1,
.po2,
.po3,
.po4 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.po1 {
  background-color: #1266ff;
}
.po2 {
  background-color: #ff9120;
}
.po3 {
  background-color: #ffa74f;
}
.po4 {
  background-color: #1fdb9b;
}
.w-f {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #1f2329;
  > span {
    flex-shrink: 0;
  }
  > span:last-of-type {
    font-weight: bold;
  }
}
.w-f2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  > div {
    width: 40%;
  }
}
.w-f3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.w-f-c {
  display: flex;
  flex-flow: column;
  margin-top: 10px;
}
.w-f-c2 {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 20px;
  > img {
    width: 50px;
  }
  > span:first-of-type {
    font-size: 24px;
  }
  > span:last-of-type {
    margin-top: 5px;
    color: #727780;
    font-size: 14px;
  }
}
.w-f-c3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  > div {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 30%;
    background-color: #f2f4f7;
    box-sizing: border-box;
    padding: 10px;
    > span:first-of-type {
    }
    > span:last-of-type {
      font-size: 14px;
      color: #727780;
    }
  }
}
</style>